<template>
	<view>
		<view class="vc-item" v-if="type == 10">
			<text class="vc-item-title">{{ title }}</text>
			<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="20" />
		</view>
		<view class="vc-item" v-if="type == 40">
			<text class="vc-item-title">{{ title }}</text>
			<picker mode="date" @change="bindDateChange" :value="birth_day" class="vc-item-content">
				<view class="uni-input">{{ birth_day }}</view>
			</picker>
		</view>
		<view class="vc-item" v-if="type == 30">
			<text class="vc-item-title">{{ title }}</text>
			<picker :range="genderList" :value="gender_value" @change="bindGenderChange" class="vc-item-content">
				<view class="uni-input">{{ gender_name }}</view>
			</picker>
		</view>
		<view v-if="type == 20">
			<view class="vc-item">
				<text class="vc-item-title">{{ title }}</text>
				<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="18" />
			</view>
			<view class="vc-item">
				<button class="code-btn" style="height: 80rpx;" :disabled="isSendCode" :style="{ background: isSendCode ? '#999' : '#f95b4f' }" @click="sendCode">
					{{ codeTest }}
				</button>
			</view>
			<view class="vc-item">
				<text class="vc-item-title">验证码</text>
				<input class="vc-item-content" v-model="code" placeholder="请输入验证码" maxlength="6" />
			</view>
		</view>
		<view v-if="key=='Identity'" class="select-protocol">
			<checkbox :checked="isAgree" @click="clickCheckbox(isAgree)" />
			<text style="margin-left:16rpx ;">我已同意</text>
			<text class="select-protocol-link" @click="handleService">《用户服务协议》及《隐私政策》</text>
		</view>
		<view class="done-btn bottom-change-view" @click="$noMultipleClicks(saveCustomer)">保存</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, isBlankString, verifyPhoneNumber, isIdentity } from '@/config/common.js';
import { saveCustomerInfobykey, sendValidateCode, checkValidateCode } from '@/constant/customer.js';
export default {
	data() {
		return {
			isAgree: false,
			title: '',
			type: 1,
			key: '',
			values: '',
			birth_day: new Date(),
			gender_value: 0,
			gender_name: '',
			genderList: ['女', '男'],
			isSendCode: false,
			seconds: 60,
			codeTest: '发送验证码',
			customerId: '',
			code: '',
			noClick: true
		};
	},
	onLoad(info) {
		if (!isLogin()) {
			toLogin();
		}
		this.title = info.title;
		this.type = info.type;
		this.key = info.key;
		this.values = info.values;
		if (this.type == 30) {
			this.gender_value = this.values;
			this.gender_name = this.gender_value == 1 || this.gender_value == '男' ? '男' : '女';
		} else if (this.type == 40) {
			if (this.values) {
				this.birth_day = this.values;
			} else {
				this.birth_day = new Date();
			}
		}
		this.customerId = uni.getStorageSync('customerId');
	},
	methods: {
		async sendCode() {
			try {
				if (!verifyPhoneNumber(this.values)) {
					errorToShow('手机号格式不正确');
					return;
				}
				this.isSendCode = true;
				await sendValidateCode({ phone: this.values, code: '' });
				successToShow('发送成功');
				let timer = setInterval(() => {
					this.seconds--;
					this.codeTest = '重新发送' + this.seconds + 's';
					if (this.seconds == 0) {
						clearInterval(timer);
						this.codeTest = '发送验证码';
						this.isSendCode = false;
						this.seconds = 60;
					}
				}, 1000);
			} catch {
				this.isSendCode = false;
			}
		},
		bindDateChange(e) {
			this.birth_day = e.target.value;
		},
		bindGenderChange(e) {
			this.gender_value = e.target.value;
			this.gender_name = this.gender_value == 1 ? '男' : '女';
		},
		clickCheckbox(e) {
			this.isAgree = !e;
		},
		handleService: function() {
			uni.navigateTo({
				url: './infoservice'
			});
		},
		async saveCustomer() {
			let userInfo = uni.getStorageSync('customerInfo');

			switch (this.key) {
				case 'NickName':
					if (isBlankString(this.values)) {
						errorToShow('请输入内容');
						return;
					}
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.values });
					userInfo.NickName = this.values;
					break;
				case 'UserName':
					if (isBlankString(this.values)) {
						errorToShow('请输入内容');
						return;
					}
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.values });
					userInfo.UserName = this.values;
					break;
				case 'Identity':
					if (!this.isAgree) {
						errorToShow('请先同意服务协议');
						return;
					}
					if (!isIdentity(this.values)) {
						errorToShow('身份证格式不正确');
						return;
					}
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.values });
					userInfo.Identity = this.values;
					break;
				case 'Gender':
					if (isBlankString(this.gender_value)) {
						errorToShow('请输入内容');
						return;
					}
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.gender_value });
					userInfo.Gender = this.gender_value;
					break;
				case 'Phone':
					if (isBlankString(this.values)) {
						errorToShow('请输入内容');
						return;
					}
					await checkValidateCode({ phone: this.values, code: this.code });
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.values });
					userInfo.Phone = this.values;
					break;
				case 'BirthDay':
					if (isBlankString(this.birth_day)) {
						errorToShow('请输入内容');
						return;
					}
					await saveCustomerInfobykey({ id: this.customerId, key: this.key, vue: this.birth_day });
					userInfo.BirthDay = this.birth_day;
					break;
			}
			if (userInfo.UserName && userInfo.Phone && userInfo.Identity) {
				userInfo.ImprovedInfo = true;
			}
			uni.setStorageSync('customerInfo', userInfo);
			successToShow('保存成功', res => {
				uni.navigateBack({
					delta: 1
				});
			});
		}
	}
};
</script>

<style scoped lang="scss">
.vc-item {
	display: flex;
	align-items: center;
	font-size: $main-text-size-32;
	color: $main-text-color-gray-33;
	height: 90rpx;
	background-color: #fff;
	border-bottom: 1px solid $main-page-color;

	&-title {
		margin-right: auto;
		margin-left: 20rpx;
	}

	&-content {
		margin-right: 20rpx;
		width: 500rpx;
		text-align: right;
	}
}

.done-btn {
	height: 80rpx;
	width: 600rpx;
	margin-left: 75rpx;
	background-color: $main-theme-color-green;
	color: #fff;
	font-size: 32rpx;
	position: absolute;
	bottom: 40rpx;
	border-radius: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-btn {
	background-color: #007aff;
	color: #fff;
	font-size: 30rpx;
	margin-left: auto;
	margin-right: 20rpx;
	border-radius: 10rpx;
	height: 70rpx !important;
	line-height: 70rpx;
}
.select-protocol {
	font-size: $main-text-size-32;
	margin-top: 0px;
	padding-left: 30rpx;
	color: $main-text-color-gray-33;
	display: flex;
	align-items: center;
	&-link {
		color: #68c8ff;
	}
}
</style>
